<template>
  <div class="container">
    <div class="container-header">
      <a-form :model="filters" layout="inline" :size="appStore.table.size">
        <a-form-item>
          <a-select v-model="filters.status" placeholder="状态" allow-clear @change="list">
            <a-option label="显示" :value=1 />
            <a-option label="隐藏" :value=2 />
          </a-select>
        </a-form-item>
        <a-form-item>
          <a-input v-model="filters.name" placeholder="名称" allow-clear></a-input>
        </a-form-item>
        <a-form-item>
          <a-button type="primary" html-type="submit" @click="list">
            <template #icon> <icon-search /> </template>
            查询
          </a-button>
        </a-form-item>
      </a-form>

      <div class="action-btns">
        <a-button type="primary" :size="appStore.table.size" @click="showAdd">
          <template #icon>
            <icon-plus />
          </template>
          新增
        </a-button>
      </div>
    </div>

    <div class="container-main">
      <a-table :loading="loading" :data="data.results" :size="appStore.table.size" :bordered="appStore.table.bordered"
        :pagination="pagination" :sticky-header="true" style="height: 100%" column-resizable @page-change="onPageChange"
        @page-size-change="onPageSizeChange">
        <template #columns>
          <a-table-column title="编号" data-index="id" />

          <a-table-column title="名称" data-index="name" />

          <a-table-column title="排序" data-index="sort" />

          <a-table-column title="状态" data-index="status">
            <template #cell="{ record }">
              {{ isCategory(record.status) }}
            </template>
          </a-table-column>

          <a-table-column title="创建时间" data-index="createdAt">
            <template #cell="{ record }">
              {{ formatDateTime(record.createdAt) }}
            </template>
          </a-table-column>

          <a-table-column title="操作">
            <template #cell="{ record }">
              <a-button type="primary" :size="appStore.table.size" @click="showEdit(record.id)">编辑</a-button>
              <a-popconfirm content="是否确定删除？" @ok="deleteAt(record.id)">
                <a-button type="primary" status="warning" style="margin-left: 20px;"
                  :size="appStore.table.size">删除</a-button>
              </a-popconfirm>
            </template>
          </a-table-column>
        </template>
      </a-table>
    </div>

    <Edit ref="edit" @ok="list" />
  </div>
</template>

<script setup lang="ts">
import Edit from './components/Edit.vue';

const appStore = useAppStore();
const loading = ref(false);
const edit = ref();
const filters = reactive({
  limit: 20,
  page: 1,

  name: undefined,
  status: undefined,
});

const data = reactive({
  page: {
    page: 1,
    limit: 20,
    total: 0,
  },
  results: [],
});

const pagination = computed(() => {
  return {
    total: data.page.total,
    current: data.page.page,
    pageSize: data.page.limit,
    showTotal: true,
    showJumper: true,
    showPageSize: true,
    pageSizeOptions: [20, 50, 100, 200, 300, 500],
  };
});

onMounted(() => {
  useTableHeight();
});

const list = async () => {
  loading.value = true;
  try {
    const ret = await axios.postForm<any>(
      '/api/admin/index-category/list',
      jsonToFormData(filters)
    );
    data.page = ret.page;
    data.results = ret.results;
  } finally {
    loading.value = false;
  }
};

list();

const isCategory = (status: any) => {
  console.log(status)
  if (status === 1) {
    return '显示';
  }
  if (status === 2) {
    return '隐藏';
  }
  return '-';
}

const showAdd = () => {
  edit.value.show();
};

const showEdit = (id: any) => {
  edit.value.showEdit(id);
};

const deleteAt = (id: any) => {
  edit.value.deleteAt(id);
};


const onPageChange = (page: number) => {
  filters.page = page;
  list();
};

const onPageSizeChange = (pageSize: number) => {
  filters.limit = pageSize;
  list();
};
</script>

<style scoped lang="less"></style>
